<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象创建模式</title>
</head>

<body>
    <!-- 
        方式一：Object构造函数模式
            套路：先创建空Object对象，再动态添加属性/方法
            适用场景：起始时不确定对象内部数据
            问题：语句太多
        方式二： 对象字面量模式
            套路： 适用{}创建对象，同事指定属性/方法
            适用场景： 起始时对象内部数据都是确定的
            问题： 如果创建多个对象，有重复代码
        方式三： 工厂模式
            套路： 通过工厂函数动态创建对象并返回
            适用场景： 需要创建多个对象
            问题： 对象没有一个具体的类型，都是Object类型
        方式四： 自定义构造函数模式
            套路： 自定义构造函数， 通过new创建对象
            适用场景： 需要创建多个类型确定的对象
            问题： 每个对象都有相同的数据，浪费内存
        方式五： 构造函数+原型的组合模式
            套路： 自定义构造函数，属性在函数中初始化，方法添加到原型上
            适用场景： 需要创建多个类型确定的对象
     -->
    <script>
        //  方式一：创建一个person
        var p = new Object()
        p.name = 'Beauty'
        p.age = 21
        p.setName = function (name) {
            this.name = name
        }
        //  测试
        p.setName('Little Beauty')

        // 方式二：创建一个person
        var p2 = {
            name: 'Beauty',
            age: 21,
            setName: function (name) {
                this.name = name
            }
        }
        console.log(p2.name)

        // 方式三
        function createPerson(name, age) {
            var obj = {
                name,
                age,
                setName: function (name) {
                    this.name = name
                }
            }
            return obj
        }
        // 创建两个人
        var person1 = createPerson('Beauty', 21)
        var person2 = createPerson('Little Beauty', 21)

        // 方式五
        function Person(name, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.setName = function (name) {
            this.name = name
        }
        var person3 = new Person('Beauty', 21)
        var person4 = new Person('Little Beauty', 21)
        console.log(person3, person4)
    </script>
</body>

</html>